<template>
    <div class="w-250px h-30px rounded-full bg-#fff flex items-center justify-between px-10px text-#000" v-bind="$attrs"
        @click="popupVisible = true">
        <span v-if="selectText" class="text-#1a1a1a text-12px">{{ selectText }}</span>
        <span v-else class="text-#757575 text-12px">{{ placeholder }}</span>
        <triangle-down color="#1c1c1c" size="8px" class="transition-transform duration-300"
            :class="{ 'rotate-180': popupVisible }"></triangle-down>

        <Teleport to="#app">
            <nut-popup v-model:visible="popupVisible" position="bottom">
                <nut-picker :columns="columns" :title="title" @cancel="popupVisible = false"
                    @confirm="confirm"></nut-picker>
            </nut-popup>
        </Teleport>
    </div>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref, computed } from 'vue'
const props = defineProps({
    columns: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    title: {
        type: String,
        default: ''
    }
})
const modelValue = defineModel()
const popupVisible = ref(false)
const selectText = computed(() => {
    return props.columns.find(item => item.value == modelValue.value)?.text
})

const confirm = (value: any) => {
    console.log(value.selectedValue)
    modelValue.value = value.selectedValue[0]
    popupVisible.value = false
}
</script>